[appkit plugin] [6/x] Add bundled chat UI to @databricks/appkit-agent by hubertzub-db · Pull Request #391 · databricks/databricks-ai-bridge

hubertzub-db · 2026-03-24T10:46:26Z

🥞 Stacked PR

Signed-off-by: Hubert Zub hubert.zub@databricks.com

Summary

Adds a pre-built React chat client to @databricks/appkit-agent, bundled into dist/chat-client/ during pnpm run build. The UI is served as static assets via the chat plugin — not exported as importable React components.

Important

This PR introduces UI pieces copied from e2e-chatbot-app-next that are used only for building a full bundle meant to be served by the appkit. Separate UI building blocks will be exported in latter PRs.

The client source is adapted from databricks/app-templates/e2e-chatbot-app-next/client, moved into integrations/appkit-agent/client/ as a self-contained Vite + React app with its own package.json and pnpm-lock.yaml.

How it works

The chat plugin exposes chat.staticAssetsPath which resolves to the dist/chat-client/ directory containing the built SPA. Pass it to AppKit's server plugin to serve the UI:

import { createApp } from "@databricks/appkit";
import { chat, agent } from "@databricks/appkit-agent";

const app = createApp({
  plugins: [
    server({ staticPath: chat.staticAssetsPath }),
    agent({}),
    chat({ backend: "agent" }),
  ],
});

Full demo (running as appkit app)

Screen.Recording.2026-03-25.at.11.36.45.mov

bbqiu

lgtm with a few comments

bbqiu · 2026-03-31T08:58:04Z

integrations/appkit-agent/client/src/components/ChatPanel.tsx

+  // Handle query param auto-send (for ?query=... deep-links)
+  let searchParams: URLSearchParams | undefined;
+  try {
+    [searchParams] = useSearchParams();


nit: should we not be calling this hook from within this try/catch?

bbqiu · 2026-03-31T08:59:02Z

integrations/appkit-agent/client/src/hooks/use-chat-stream.ts

@@ -0,0 +1,221 @@
+import type { LanguageModelUsage, UIMessageChunk } from 'ai';


would it be possible to dedupe this file with chat.tsx?

bbqiu · 2026-03-31T09:00:18Z

integrations/appkit-agent/package.json

  ],
  "scripts": {
-    "build": "rm -rf dist && tsdown && tailwindcss -c tailwind.chat-ui.config.js -i src/chat-ui/simple/styles.css -o dist/chat-ui/styles.css --minify",
+    "build:client": "cd client && pnpm install --frozen-lockfile=false && pnpm exec vite build",


should this be frozen lockfile = true?

bbqiu · 2026-03-31T09:02:53Z

integrations/appkit-agent/client/src/contexts/ChatProvider.tsx

+  if (typeof window !== 'undefined') {
+    window.__CHAT_CONFIG__ = { apiBase, basePath };
+  }
+
+  useEffect(() => {
+    window.__CHAT_CONFIG__ = { apiBase, basePath };
+  }, [apiBase, basePath]);


nit: can we use useLayoutEffect instead?

bbqiu · 2026-03-31T09:04:17Z

integrations/appkit-agent/src/chat-plugin/index.ts

+        return dir;
+      }
+    }
+    return undefined;


nit: can we log an error explaining what's wrong and how the user might be able to resolve the error? ex. which command to run to generate these files

Move agent plugin source code into src/agent-plugin/ subfolder for better organization when hosting multiple plugins.

Signed-off-by: Hubert Zub <hubert.zub@databricks.com>

Add per-package pnpm-lock.yaml and CI/release workflows with explicit pnpm version and cache-dependency-path.

Signed-off-by: Hubert Zub <hubert.zub@databricks.com>

hubertzub-db force-pushed the stack/agent-plugin-p6 branch 5 times, most recently from 23b1ea1 to 6e51f08 Compare March 24, 2026 12:11

hubertzub-db mentioned this pull request Mar 24, 2026

[appkit plugin] [7/x] Add default-ui playground for @databricks/appkit-agent #392

Open

hubertzub-db force-pushed the stack/agent-plugin-p6 branch 3 times, most recently from 7788ee8 to ab61bc9 Compare March 24, 2026 15:33

hubertzub-db changed the title UI [appkit plugin] [6/x] Add bundled chat UI to @databricks/appkit-agent Mar 24, 2026

hubertzub-db force-pushed the stack/agent-plugin-p6 branch from ab61bc9 to 55a4366 Compare March 24, 2026 15:53

hubertzub-db requested a review from bbqiu March 24, 2026 16:02

hubertzub-db force-pushed the stack/agent-plugin-p6 branch 5 times, most recently from 0d14562 to a312c62 Compare March 25, 2026 10:38

hubertzub-db mentioned this pull request Mar 25, 2026

[appkit plugin] [7/x] Add custom UI elements (+playground) to @databricks/appkit-agent #395

Open

3 tasks

bbqiu approved these changes Mar 31, 2026

View reviewed changes

hubertzub-db added 7 commits April 1, 2026 11:00

Agent plugin

c7b0c54

Move agent plugin source code into src/agent-plugin/ subfolder for better organization when hosting multiple plugins.

CR feedback

eabd0b6

Signed-off-by: Hubert Zub <hubert.zub@databricks.com>

Responses

c463ebf

Signed-off-by: Hubert Zub <hubert.zub@databricks.com>

docs

d9af352

Signed-off-by: Hubert Zub <hubert.zub@databricks.com>

CR feedback

96a56f3

Signed-off-by: Hubert Zub <hubert.zub@databricks.com>

simple chatui

adc9176

Signed-off-by: Hubert Zub <hubert.zub@databricks.com>

Standalone pnpm for chat-ui

64e1d95

Add per-package pnpm-lock.yaml and CI/release workflows with explicit pnpm version and cache-dependency-path.

hubertzub-db added 4 commits April 1, 2026 11:00

Move to appkit-agent

ce40d32

Signed-off-by: Hubert Zub <hubert.zub@databricks.com>

Chat plugin

9a32b44

Signed-off-by: Hubert Zub <hubert.zub@databricks.com>

bugfixes

2e23f68

Signed-off-by: Hubert Zub <hubert.zub@databricks.com>

Backend option

e9154b6

Signed-off-by: Hubert Zub <hubert.zub@databricks.com>

hubertzub-db force-pushed the stack/agent-plugin-p6 branch from a312c62 to 5d750d9 Compare April 1, 2026 13:26

hubertzub-db added 3 commits April 1, 2026 15:37

Cr feedback

638d1ee

Signed-off-by: Hubert Zub <hubert.zub@databricks.com>

UI

063ed6c

Signed-off-by: Hubert Zub <hubert.zub@databricks.com>

CR fixes

a1b28f4

Signed-off-by: Hubert Zub <hubert.zub@databricks.com>

hubertzub-db force-pushed the stack/agent-plugin-p6 branch from 5d750d9 to a1b28f4 Compare April 1, 2026 13:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[appkit plugin] [6/x] Add bundled chat UI to @databricks/appkit-agent#391

[appkit plugin] [6/x] Add bundled chat UI to @databricks/appkit-agent#391
hubertzub-db wants to merge 14 commits intodatabricks:mainfrom
hubertzub-db:stack/agent-plugin-p6

hubertzub-db commented Mar 24, 2026 •

edited

Loading

Uh oh!

bbqiu left a comment

Uh oh!

bbqiu Mar 31, 2026

Uh oh!

bbqiu Mar 31, 2026

Uh oh!

bbqiu Mar 31, 2026

Uh oh!

bbqiu Mar 31, 2026

Uh oh!

bbqiu Mar 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -0,0 +1,221 @@
		import type { LanguageModelUsage, UIMessageChunk } from 'ai';

Conversation

hubertzub-db commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🥞 Stacked PR

Summary

How it works

Full demo (running as appkit app)

Uh oh!

bbqiu left a comment

Choose a reason for hiding this comment

Uh oh!

bbqiu Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

bbqiu Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

bbqiu Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

bbqiu Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

bbqiu Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

hubertzub-db commented Mar 24, 2026 •

edited

Loading